<template>
  <div class="content_box">
    <!-- 栏目 -->
    <div class="lanmu_box" v-if="isShow">
      <div class="box">
        <van-tabs :active="active" @change="tabChange">
          <van-tab :title="item.name" v-for="(item,index) in lanmu" :key="index"></van-tab>
        </van-tabs>
      </div>
    </div> 
    <!-- 兑换 -->
    <div class="duihuan_box" v-if="!active">
      <div class="box">
        <p class="top_text">美团/大众团购核销</p>
        <p class="img">
          <img src="/static/images/meituan.png" alt="">
          <img src="/static/images/dazhong.png" alt="">
        </p>
        <div class="input"> 
          <input v-model="mtCode" type="text" placeholder="请输入卡券兑换码">
          <img @click="scanCode" src="/static/images/saoma.png" alt="">
        </div>
        <p class="text">兑换须知：</p>
        <p class="text">1.根据场馆预定情况，部分时段由于已被选择，系统中部分时段不可选。</p>
        <!-- <p class="text">2.如果您使用过程中希望延长时长，可以在首页进行续单操作。</p> -->
        <p class="text">2.在您点击下方按钮后，系统将即时生效，<span>无法操作退回</span>，<span>无法进行续单</span>，请您确认好场次后再进行兑换。</p>
        <p class="text">3.如您在过程中遇到任何问题，可以及时联系我们。</p>
        <div class="dh_anniu_box">
          <p>取消</p>
          <van-button 
          @click="submit_mt"
          :disabled="loading"
          :loading="loading" 
          loading-text="兑换中..."
          type="primary"
          color="#3d98f7"
          custom-style="width: 276rpx;height: 88rpx;line-height: 88rpx;border:1px solid #222222;background: #222;border-radius: 4rpx;text-align: center;font-weight: bold;color: #fff;font-size: 30rpx;"
        >确定</van-button>
        </div>
      </div>
    </div>

    <!-- 充值 -->
    <div class="chongzhi_box" v-if="active == 1">
      <div class="quota_box">
        <div class="box">
          <img src="/static/images/cz_bj.png" alt="">
          <div class="nr">
            <p class="text">我的余额/充值(元)</p>
            <p class="num"><span>￥</span>{{available}}</p>
          </div>
        </div>
      </div>
      <div class="list_box">
        <div @click="listClick(index,item)" :class="listIndex == index?'box on':'box'" v-for="(item,index) in list" :key="index">
          <p class="text" v-if="item.suggest">特惠充值</p>
          <p class="num"><span>￥</span>{{item.amount}}</p>
          <p class="z_num">赠送<span>￥</span>{{item.giveAway}}</p>
          <img v-if="listIndex == index" src="/static/images/cz_on.png" alt="">
        </div>
      </div>
      <div class="room_jieshao">
        <p class="text">使用说明</p>
        <p class="text1">1会员储值金额可预约棋牌室和购买卡券。</p>
        <p class="text1">2,会员储值金额及赠送金额不可退款。</p>
        <p class="text1">3.会员储值金额不可提现。</p>
      </div>
      <div class="anniu_box">
        <div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
          <div class="left">
            <p class="text">额外送 ¥{{changeMoney.giveAway}}，共 ¥{{changeMoney.totlePrice}}</p>
            <p class="num"><span>￥</span>{{changeMoney.amount}}</p>
          </div>
          <van-button 
            @click="submit"
            :disabled="loading"
            :loading="loading" 
            loading-text="充值中..."
            type="primary"
            color="#3d98f7"
            custom-style="border:none;width: 210rpx;height: 80rpx;line-height: 80rpx;background: #222;border-radius: 4rpx;text-align: center;font-weight: 500;color: #fff;font-size: 28rpx;"
          >立即充值</van-button>
        </div>
      </div>
    </div>

    
  </div>
</template>

<script>
import { Debounce } from "@/utils/index";

import { 
  getRechargeAmountList,
  recharge,
  rechargeStartPay,
  receiptCheckout
} from "@/api/index";
export default {
  data() {
    return {
      lanmu:[
        {name:'兑换',orderStatus:''},
        {name:'储值',orderStatus:'start'},
      ],
      active:0,
      isIphoneXnum:0,
      listIndex:0,
      isShow:false,
      available:'0.00',
      listIndex:0,
      changeMoney:{},// 充值选中的价格
      rechargeAmountId:'',// 充值列表ID
      rechargeRecordId:'',// 充值记录ID
      list:[],
      loading:false,
      mtCode:''
    };
  },
  methods: {

    // 美团验券-确认
    submit_mt(){
      if(this.mtCode == ''){
        this.$toast('请输入券码')
        return
      }
      this.loading = true
      this.mtVoucher(this.mtCode)
    },

    // 美团验券
    mtVoucher(receiptCode){
      receiptCode = receiptCode.replace(/\s*/g,"")
      console.log(receiptCode)
      this.$showLoading('验券中...')
      receiptCheckout({receiptCode}).then(res=>{
        if(res.statusCode == '00000'){
          setTimeout(() => {
            wx.hideLoading()
            wx.navigateTo({
              url: `/pages/mt/main?info=${JSON.stringify(res.data)}`,
            });
            this.loading = false
          }, 1000);
          
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },

    // 扫码
    scanCode(){
      wx.scanCode({  // 调起客户端扫码界面进行扫码
        complete: (res) => {}, //接口调用结束的回调函数（调用成功、失败都会执行）
        fail:(res) => {},  //接口调用失败的回调函数
        onlyFromCamera: true,  //是否只能从相机扫码，不允许从相册选择图片,这里是只允许相机扫码
        scanType: ['qrCode'],  // 扫码类型 : 二维码
        success:(it) => {  // 接口调用成功的回调函数
          console.log(it);
          this.mtCode = it.result
          this.mtVoucher(it.result)
        }
      })
    },

    // 充值
    submit:Debounce(async function () {
      const that = this
      this.loading = true
      let data = {
        rechargeAmountId:this.rechargeAmountId,
        storeId:that.storeId
      }
      await recharge(data).then(res=>{
        if(res.statusCode == '00000'){
          that.rechargeRecordId = res.data.id
        }else{
          that.$toast('失败，请稍后再试！')
          that.loading = false
        }
      })
      if(that.rechargeRecordId){
        await rechargeStartPay({rechargeRecordId:that.rechargeRecordId}).then(res=>{
          if(res.statusCode == '00000'){
            wx.requestPayment({
              timeStamp:res.data.timeStamp,
              nonceStr:res.data.nonce_str,
              package:`prepay_id=${res.data.prepay_id}`,
              signType:"MD5",
              paySign:res.data.sign,
              success:function(succ){
                console.log(succ)
                that.loading = false
                if(succ.errMsg === "requestPayment:ok"){
                  wx.navigateBack({
                    delta: 1
                  })
                }
              },
              fail:function(err){
                that.loading = false
                that.$toast('充值失败~')
              }
            })
          }else{
            that.loading = false
            that.$toast('充值失败~')
          }
        })
      }
    },300),

    // 充值列表
    getCzList(){
      getRechargeAmountList().then(res=>{
        if(res.statusCode == '00000'){
          this.available = res.data.available
          if(res.data.rechargeAmountList.length){
            // 取到推荐的index
            let index = res.data.rechargeAmountList.findIndex(item => item.suggest == 1)
            if(index || index == 0){
              this.listIndex = index
              this.rechargeAmountId = res.data.rechargeAmountList[index].id
              this.changeMoney = res.data.rechargeAmountList[index]
              this.changeMoney.totlePrice = (+this.changeMoney.giveAway)+(+this.changeMoney.amount)
            }
            res.data.rechargeAmountList.map(item=>{
              item.amount = item.amount.split('.')[0]
              item.giveAway = item.giveAway.split('.')[0]
            })
            this.list = res.data.rechargeAmountList
          }else{
            this.list = []
          }
          
        }
      })
    },

    // 选择切换
    listClick(index,item){
      this.listIndex = index
      this.rechargeAmountId = item.id
      this.changeMoney = this.list[index]
      this.changeMoney.totlePrice = (+this.changeMoney.giveAway)+(+this.changeMoney.amount)
    },

    // 栏目切换
    tabChange(e){
      console.log(e)
      this.active = e.mp.detail.index
      if(!this.active){
        wx.setNavigationBarTitle({
          title: "兑换"
        })
        return
      }
      wx.setNavigationBarTitle({
        title: "储值"
      })
      this.getCzList()
    }
    
  },
  onLoad(options){
    console.log(options)
    this.isShow = true
    this.active = +options.active
    if(options.active == '0'){
      wx.setNavigationBarTitle({
        title: "兑换"
      })
    }else{
      wx.setNavigationBarTitle({
        title: "储值"
      })
      this.getCzList()
    }
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
  },
  onShow() {
    console.log(this.roles)
  },
};
</script>

<style lang="scss" scoped>
.content_box{
  width: 100%;
  .lanmu_box{
    height: 88rpx;
    .box{
      position: fixed;
      top:0;
      width: 100%;
      z-index: 100;
      background: #fff;
    }
    /deep/ .van-tab{
      color:#999;
      font-size:30rpx;
    }
    /deep/ .van-tabs__line{
      background: #222;
    }
    /deep/ .van-tab--active{
      color:#222;
      font-weight: bold;
    }
  }
  .quota_box{
    padding:40rpx;
    background: #F5F5F5;
    .box{
      width: 100%;
      height: 368rpx;
      position: relative;
      background: linear-gradient(to right,#C8D4A5, #ABB674);
      box-shadow: 0px 0px 8rpx 4rpx rgba(68, 83, 54, 0.1);
      border-radius: 20rpx;
      img{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .nr{
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 10;
        padding-left:40rpx;
        color:#fff;
        .text{
          font-size:28rpx;
          margin-bottom:10rpx;
          padding-top:80rpx;
        }
        .num{
          font-size: 88rpx;
          display: flex;
          align-items: center;
          span{
            font-size:34rpx;
          }
        }
      }
    }
  }
  .list_box{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin:0 auto;
    padding:40rpx;
    padding-bottom:10rpx;
    margin-top:-100rpx;
    position: relative;
    z-index: 20;
    background: #fff;
    .box{
      width: 320rpx;
      height: 166rpx;
      background: #fff;
      border-radius: 8rpx;
      text-align: center;
      display: flex;
      flex-direction:column;
      justify-content: center;
      margin-bottom:24rpx;
      border:1px solid transparent;
      position: relative;
      box-shadow: 0 0 10rpx 0rpx #EBEAE9;
      img{
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right:0;
        bottom:0;
      }
      &.on{
        background: #FFFDF5;
        border:1px solid #F47155;
      }
      .text{
        position: absolute;
        top:-2rpx;
        left: -2rpx;
        width: 94rpx;
        height: 30rpx;
        background: linear-gradient(to right,#FF4357, #FE6E34);
        font-size:18rpx;
        color:#fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        border-bottom-right-radius: 8rpx;
        border-top-left-radius: 8rpx;
      }
      .num{
        font-size:60rpx;
        color:#3E3E3E;
        display: flex;
        align-items: baseline;
        justify-content: center;
        font-weight: bold;
        span{
          font-size:24rpx;
        }
      }
      .z_num{
        font-size:26rpx;
        color:#F47156;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        span{
          font-size:22rpx;
        }
      }
    }
  }
  .room_jieshao{
    margin:0 30rpx;
    padding-bottom:30rpx;
    .text{
      margin:30rpx 0 24rpx 0;
      color:#333;
      font-size:32rpx;
      font-weight: bold;
      border-bottom:1px solid #F6F6F6;
      padding:0 30rpx 20rpx 30rpx;
    }
    .text1{
      color:#9A9A9A;
      font-size:26rpx;
      line-height: 50rpx;
      padding:0 30rpx;
    }
  }
  .anniu_box{
    height: 144rpx;
    .box{
      position: fixed;
      bottom:0;
      height: 144rpx;
      background: #fff;
      width: 92%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top:1px solid #D9D9D9;
      padding:0 30rpx;
    }
    .text{
      color:#F47156;
      font-size:26rpx;
    }
    .num{
      color:#222;
      font-size:56rpx;
      display: flex;
      align-items: center;
      span{
        font-size:32rpx;
      }
    }
    .anniu{
      width: 90%;
      height: 96rpx;
      line-height: 96rpx;
      background: #222222;
      color:#fff;
      font-size:30rpx;
      border-radius: 4rpx;
      text-align: center;
    }
  }
  /*兑换*/
  .duihuan_box{
    min-height: 100vh;
    background: #F5F5F5;
    padding-top:24rpx;
    .box{
      width: 92%;
      margin:0 auto;
      background: #fff;
      border-radius: 4rpx;
      .top_text{
        color:#000;
        font-size:34rpx;
        font-weight: bold;
        text-align: center;
        padding-top:64rpx;
      }
      .img{
        text-align: center;
        margin:40rpx 0 56rpx;
        img{
          width: 84rpx;
          height: 84rpx;
          margin-right:16rpx;
        }
      }
      .input{
        height: 88rpx;
        border:1px solid #9A9A9A;
        margin:0 54rpx;
        border-radius: 4rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom:20rpx;
        input{
          font-size:28rpx;
          color:#222;
          margin-left:32rpx;
        }
        img{
          width: 40rpx;
          height: 40rpx;
          margin-right:32rpx;
        }
      }
      .text{
        font-size:24rpx;
        color:#666;
        margin:0 54rpx;
        line-height: 40rpx;
        span{
          color:red;
        }
      }
      .dh_anniu_box{
        display: flex;
        justify-content: space-between;
        margin:0 54rpx;
        margin-top:64rpx;
        padding-bottom:64rpx;
        p{
          width: 276rpx;
          height: 84rpx;
          border:1px solid #222222;
          border-radius: 4rpx;
          font-size:30rpx;
          line-height: 84rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>